<template>
  <a-form-model
    ref="refForm"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
    :model="model"
    :rules="rules"
  >
    <FormField
      field-name="invoice_type"
      label="发票类型"
      width="120px"
      v-model="formValues"
      :editable="editable"
      :fields="fields"
      :view-info="viewInfo"
      :data-info="dataInfo"
      @change="handleChange"
    />

    <div class="fa_header">
      <a-form-model-item class="fa_img">
        <img
          src="../../assets/logo.png"
          alt=""
          style="width: 160px; height: 160px"
        />
      </a-form-model-item>
      <a-form-model-item class="fa_title">
        <!-- 北京市 -->
        {{
          ((meta_get('invoice_type').selection || []).find(
            item => item[0] === record.invoice_type
          ) || ['', ''])[1]
        }}
      </a-form-model-item>
      <div class="fa_header_info">
        <a-form-model-item label="发票代码">
          {{ record.type_code }}
        </a-form-model-item>

        <a-form-model-item label="发票号码">
          {{ record.code }}
        </a-form-model-item>

        <a-form-model-item label="开票日期">
          {{ record.date_fapiao }}
        </a-form-model-item>

        <a-form-model-item label="校验码">
          {{ record.check_code }}
        </a-form-model-item>
      </div>
    </div>

    <div class="fa_main">
      <div class="fa_main_left">
        <div class="fa_main_pay">购买方</div>
        <div>
          <FormField
            :field-name="
              ['out_invoice', 'out_refund'].includes(
                { ...record, ...values }.type
              )
                ? 'partner_id'
                : 'buyer_name'
            "
            label="名   称"
            width="300px"
            v-model="formValues"
            :editable="editable"
            :fields="fields"
            :view-info="viewInfo"
            :data-info="dataInfo"
            @change="handleChange"
          />

          <FormField
            field-name="buyer_tax_code"
            label="纳税人识别号"
            width="120px"
            v-model="formValues"
            :editable="editable"
            :fields="fields"
            :view-info="viewInfo"
            :data-info="dataInfo"
            @change="handleChange"
          />
          <FormField
            field-name="buyer_address_phone"
            label="地址、   电话"
            width="120px"
            v-model="formValues"
            :editable="editable"
            :fields="fields"
            :view-info="viewInfo"
            :data-info="dataInfo"
            @change="handleChange"
          />

          <FormField
            field-name="buyer_bank_account"
            label="银行账号"
            width="120px"
            v-model="formValues"
            :editable="editable"
            :fields="fields"
            :view-info="viewInfo"
            :data-info="dataInfo"
            @change="handleChange"
          />
        </div>
      </div>
      <div class="fa_main_right">
        <div class="fa_main_pay">信息区</div>
        <div></div>
      </div>
    </div>

    <a-form-model-item class="fa_table" prop="line_ids">
      <LineIds
        width="120px"
        ref="refRelation_line_ids"
        v-model="formValues.line_ids"
        :editable="editable"
        :field-info="{ ...meta_get('line_ids') }"
        :view-info="viewInfo"
        :data-info="dataInfo"
        @change="handleChange"
      />
    </a-form-model-item>

    <div class="fa_tax">
      <div class="fa_tax_da">加税合计(大写)</div>
      <FormField
        :no_label="''"
        style="width: 50%"
        field-name="cn_amount_total"
        v-model="formValues"
        :editable="false"
        :fields="fields"
        :view-info="viewInfo"
        :data-info="dataInfo"
        @change="handleChange"
      />
      <FormField
        :no_label="'(小写)'"
        field-name="amount_total"
        width="120px"
        v-model="formValues"
        :editable="false"
        :fields="fields"
        :view-info="viewInfo"
        :data-info="dataInfo"
        @change="handleChange"
      />
    </div>

    <div class="fa_main" style="border-top: 0px">
      <div class="fa_main_left">
        <div class="fa_main_pay">销售方</div>
        <div>
          <!-- field-name="company_id" -->
          <FormField
            :field-name="
              ['out_invoice', 'out_refund'].includes(
                { ...record, ...values }.type
              )
                ? 'company_id'
                : 'saler_name'
            "
            label="名   称"
            width="300px"
            v-model="formValues"
            :editable="editable"
            :fields="fields"
            :view-info="viewInfo"
            :data-info="dataInfo"
            @change="handleChange"
          />

          <FormField
            field-name="saler_tax_code"
            label="纳税人识别号"
            width="120px"
            v-model="formValues"
            :editable="editable"
            :fields="fields"
            :view-info="viewInfo"
            :data-info="dataInfo"
            @change="handleChange"
          />
          <FormField
            field-name="saler_address_phone"
            label="地址、   电话"
            width="120px"
            v-model="formValues"
            :editable="editable"
            :fields="fields"
            :view-info="viewInfo"
            :data-info="dataInfo"
            @change="handleChange"
          />

          <FormField
            field-name="saler_bank_account"
            label="银行账号"
            width="120px"
            v-model="formValues"
            :editable="editable"
            :fields="fields"
            :view-info="viewInfo"
            :data-info="dataInfo"
            @change="handleChange"
          />
        </div>
      </div>
      <div class="fa_main_right">
        <div class="fa_main_pay">备注</div>

        <FormField
          :no_label="''"
          field-name="note"
          width="120px"
          v-model="formValues"
          :editable="editable"
          :fields="fields"
          :view-info="viewInfo"
          :data-info="dataInfo"
          @change="handleChange"
        />
      </div>
    </div>

    <div class="fa_bottom">
      <FormField
        field-name="payee_name"
        width="120px"
        v-model="formValues"
        :editable="editable"
        :fields="fields"
        :view-info="viewInfo"
        :data-info="dataInfo"
        @change="handleChange"
      />

      <FormField
        field-name="checker_name"
        width="120px"
        v-model="formValues"
        :editable="editable"
        :fields="fields"
        :view-info="viewInfo"
        :data-info="dataInfo"
        @change="handleChange"
      />

      <FormField
        field-name="drawer_name"
        width="120px"
        v-model="formValues"
        :editable="editable"
        :fields="fields"
        :view-info="viewInfo"
        :data-info="dataInfo"
        @change="handleChange"
      />

      <FormField
        field-name="saler_name"
        label="销售方(章)"
        width="120px"
        v-model="formValues"
        :editable="editable"
        :fields="fields"
        :view-info="viewInfo"
        :data-info="dataInfo"
        @change="handleChange"
      />
    </div>
  </a-form-model>
</template>

<script>
import FormField from '@/components/OView/FormField.vue'
import LineIds from './line_ids.vue'

export default {
  name: 'Fapiao',
  components: { FormField, LineIds },
  mixins: [],
  props: {
    model: {
      type: Object,
      default: () => {
        return {}
      }
    },
    rules: {
      type: Object,
      default: () => {
        return {}
      }
    },

    editable: { type: Boolean, default: false },

    fields: {
      type: Object,
      default: () => {
        return {}
      }
    },
    viewInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
    dataInfo: {
      type: Object,
      default: () => {
        return { record: {}, values: {} }
      }
    }
  },

  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 }
    }
  },
  computed: {
    formValues: {
      get() {
        return this.model
      },
      set(val) {
        this.$emit('update:model', val)
      }
    },
    record() {
      return this.dataInfo.record || {}
    },

    values() {
      return this.dataInfo.values || {}
    }
  },

  watch: {},

  async created() {},

  async mounted() {},

  methods: {
    validate(callback) {
      this.$refs.refForm.validate(async valid => {
        // console.log('form valid', valid)
        callback(valid)
      })
    },
    meta_get(fname) {
      return this.fields[fname] || {}
    },

    async handleChange(...args) {
      this.$emit('change', ...args)
    },

    async load_relation() {
      // 对于自定义 页面
      // realtion field 必须 定义 ref 参数
      // 且命名为 以 refRelation 开头 如: refRelation_child_ids
      const refRelations = Object.keys(this.$refs).filter(
        item => item.slice(0, 11) === 'refRelation'
      )

      for (const strRef of refRelations) {
        const ref = this.$refs[strRef]

        if (ref) {
          await ref.load_relation()
        }
      }

      const refFields = this.$refs.refField || []
      for (const refField of refFields) {
        await refField.load_relation()
      }
    },

    async load_relation_data() {
      const refRelations = Object.keys(this.$refs).filter(
        item => item.slice(0, 11) === 'refRelation'
      )

      for (const strRef of refRelations) {
        const ref = this.$refs[strRef]

        if (ref) {
          await ref.load_relation_data()
        }
      }

      const refFields = this.$refs.refField || []
      for (const refField of refFields) {
        await refField.load_relation_data()
      }
    }
  }
}
</script>

<style scoped>
.ant-form {
  background: white !important;
  margin-top: 4px !important;
  padding: 20px 30px !important;
}
.ant-form-item {
  margin-bottom: 0px;
}
.fa_header {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.fa_title {
  display: flex;
  align-items: flex-end;
  font-size: 28px;
  font-weight: 600;
  padding-bottom: 40px;
  padding-left: 60px;
}
/deep/.ant-form-item-control-wrapper {
  width: auto !important;
}
/deep/.fa_title .ant-form-item-children {
  text-decoration: underline;
  padding-bottom: 2px;
  border-bottom: 2px solid;
}
/deep/.fa_table .ant-form-item-control-wrapper {
  width: 100% !important;
}

.fa_header_info {
  display: flex;
  flex-direction: column;
  width: 30%;
}
.fa_main {
  display: flex;
  border: 1px solid;
  width: 100%;
}
.fa_main_left {
  display: flex;
  width: 55%;
}
.fa_main_pay {
  width: 4%;
  border-right: 1px solid;
  padding: 1%;
  align-items: center;
  justify-content: center;
  display: flex;
}
.fa_main_right {
  border-left: 1px solid;
  width: 45%;
  display: flex;
}
.fa_main_password {
  display: flex;
  align-items: center;
}
.fa_table {
  border-left: 1px solid;
  border-right: 1px solid;
}
.fa_total {
  display: flex;
  width: 100%;
  border: 1px solid;
}
.fa_total_name {
  width: 30%;
}
.fa_total_value {
  display: flex;
}
.fa_tax {
  border: 1px solid;
  display: flex;
}
.fa_tax_da {
  border-right: 1px solid;
  width: 12%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.fa_bottom {
  display: flex;
  justify-content: space-between;
}
</style>
